<template>
  <div class="subject">
    <span>{{ num1 }}</span>
    <span>+</span>
    <span>{{ num2 }}</span>
    <span>=</span>
    <input type="number" v-model="answer"/>
    <button @click="sumbmit">提交</button>
    </div>
</template>

<script>
export default {
    props:['num1','num2'],
  data() {
    return {
        answer:null
    }
    },
    methods: {
        sumbmit() {
            const result = this.num1 + this.num2
            const result1 = this.answer
            const isTrue = result == result1
            this.$emit('sumbmit', { isTrue, result, result1 })
            this.answer=''
    }
  }
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>